<template>
  <view class="content">
    <image
      class="shop-img"
      :src="BuildImageUrl(store.logo)"
      mode="aspectFill"
    ></image>
    <view class="text-content">
      <view class="shop-name">{{ store.headofficeName }}</view>
      <view class="shop-dis">与我当前的距离{{ store.distance }}km</view>
      <view class="shop-addr-container flexr align-center">
        <view class="shop-addr flex-1">
          {{ store.address }}
        </view>
        <view class="btns flexr">
          <image
            class="btn-img"
            src="@/static/call.png"
            @click="makePhoneCall"
          ></image>
          <image
            class="btn-img"
            src="@/static/navigation.png"
            @click="openLocation"
          ></image>
        </view>
      </view>
      <view class="shop-time"> 营业时间：{{ store.businessHoursStr }} </view>
      <view class="flexr">
        <view class="tag-item flexr align-center justify-center">
          {{ store.businessStatus }}
        </view>
        <view
          v-if="store.isCanAppointment"
          class="tag-item flexr align-center justify-center"
        >
          可预约
        </view>
      </view>
    </view>
    <view class="flex-1" />
    <view
      class="primary-button"
      :class="{ 'disable-button': !Boolean(store.isCanAppointment) }"
      @click="goAppointmentDetail"
    >
      立即预约
    </view>
  </view>
</template>

<script setup>
import { BuildImageUrl } from "@/api/api";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { useShopStore } from "@/store/shop";
import { useUserStore } from "@/store/user";
const shopStore = useShopStore();
const userStore = useUserStore();
const store = ref({});
onLoad(({ storesId }) => {
  // console.log(storesId);
  store.value =
    shopStore.nearby.find((item) => item.storesId == storesId) || {};
});
function goAppointmentDetail() {
  if (!userStore.isLogin) {
    const url = `/subpages/appointment/appointmentDetail?storesId=${store.value.storesId}`;
    uni.navigateTo({
      url: `/subpages/account/login?url=${url}`,
    });
  } else {
    uni.navigateTo({
      url: `/subpages/appointment/appointmentDetail?storesId=${store.value.storesId}`,
    });
  }
}
function makePhoneCall() {
  if (!store.value.mobile) {
    uni.showToast({
      title: "暂无联系方式",
      icon: "none",
    });
    return;
  }
  uni.makePhoneCall({
    phoneNumber: store.value.mobile,
  });
}
function openLocation() {
  uni.openLocation({
    latitude: +store.value.latitude,
    longitude: +store.value.longitude,
    name: store.value.headofficeName,
    address: store.value.address,
  });
}
</script>

<style lang="scss">
.content {
  background-color: white;
  .text-content {
    padding: 50rpx 32rpx;
  }
  .shop-img {
    height: 500rpx;
    width: 100%;
  }
  .shop-name {
    font-size: 36rpx;
    color: $text-color1;
  }
  .shop-dis {
    margin-top: 18rpx;
    font-size: 24rpx;
    color: $text-color2;
  }
  .shop-addr-container {
    margin-top: 32rpx;
  }
  .shop-addr {
    font-size: 28rpx;
    color: $text-color1;
    margin-right: 62rpx;
  }
  .btns {
    .btn-img {
      height: 72rpx;
      width: 72rpx;
    }
    .btn-img + .btn-img {
      margin-left: 32rpx;
    }
  }
  .shop-time {
    margin-top: 18rpx;
    font-size: 28rpx;
    color: $text-color1;
  }
  .tag-item {
    height: 36rpx;
    padding: 0 10rpx;
    color: $text-color4;
    background-color: $tag-bg;
    font-size: 20rpx;
    border-radius: 8rpx;
    margin-top: 18rpx;
  }
  .tag-item + .tag-item {
    margin-left: 8rpx;
  }
  .primary-button {
    margin: 0 60rpx 30rpx 60rpx;
  }
}
</style>
